<template>
    <div id="index_continer">
        <div class="center">
            <!--地图容器-->
            <div id="map">
                <map-container></map-container>
            </div>
            <!--疫情详细数据-->
            <div class="left">
                <div class="CovInfo">
                    <h3>&nbsp;&nbsp;疫情详情</h3>
                    <button @click="shuaxing">刷新</button>
                    <span><i class="iconfont icon-kouzhao"></i>累计死亡人数</span>
                    <p class="one">{{dead}}</p>
                    <span><i class="iconfont icon-kouzhao"></i>累计确诊人数</span>
                    <p class="two">{{ confirme}}</p>
                    <span><i class="iconfont icon-kouzhao"></i>新增累计确诊人数</span>
                    <p class="three">{{current}}</p>
                    <span><i class="iconfont icon-kouzhao"></i>高风险地区</span>
                    <p class="four">{{highDanger}}</p>
                    <span><i class="iconfont icon-kouzhao"></i>中风险地区</span>
                    <p class="five">{{midDanger}}</p>
                </div>
                <div class="btn">
                    <el-button @click="drawer = true" type="primary" style="margin-left: 0;">
                        出行
                    </el-button>
                    <el-drawer
                            title="出行服务"
                            :visible.sync="drawer"
                            :direction="direction"
                            :before-close="handleClose"
                    >
                        <div class="travel" @click="GoUrl">
                            <p>路线规划</p>
                        </div>
                        <el-skeleton :rows="6" animated style="margin: 10px" />
                        <div class="remind">
                            <p class="el-icon-notebook-2">出行小贴士</p>
                            <el-collapse v-model="activeName" accordion>
                                <el-collapse-item title="配合 Coordinate" name="1">
                                    <div>配合当地政府：遵守当地防疫政策，配合当地政府防疫措施；</div>
                                    <div>配合防疫人员：配合防疫工作人员的检查，及时出示核酸检测证明。</div>
                                </el-collapse-item>
                                <el-collapse-item title="防护 Protection" name="2">
                                    <div>注意防护：出行记得戴好口罩，进家门前记得消毒</div>
                                    <div>减少人员聚集</div>
                                </el-collapse-item>
                                <el-collapse-item title="效率 Efficiency" name="3">
                                    <div>简化流程：设计简洁直观的操作流程；</div>
                                    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
                                    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
                                </el-collapse-item>
                                <el-collapse-item title="可控 Controllability" name="4">
                                    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
                                    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                    </el-drawer>
                    <el-button @click="drawertwo = true" type="primary" style="margin-left: 0;">
                        疫情服务
                    </el-button>
                    <el-drawer
                            title="疫情服务"
                            :visible.sync="drawertwo"
                            :direction="directiont"
                            :before-close="handleCloset">
                        <div class="Covdesc" @click="GoCov">
                            <p>公告</p>
                        </div>
                        <div class="elm" @click="Delivery">
                            <p>配送</p>
                        </div>
                        <el-skeleton :rows="3" animated style="margin: 10px" />
                        <!--疫情热点公告组件-->
                        <epidemicReport></epidemicReport>
                    </el-drawer>
                </div>
                <cookie class="cok"></cookie>
            </div>
            <!--折线柱状图-->
            <div class="right">
                <Bar class="bar"></Bar>
                <broken class="bro"></broken>
            </div>
            <!--Map动态操作-->
            <div class="operation">
                <div id="search">
                    <Search></Search>
                </div>
                <div class="hestMap">
                    <heat-map-search-box></heat-map-search-box>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    import MapContainer from "@/components/MapContainer";
    import Search from "@/components/Search";
    import Bar from "@/views/Bar";
    import Cookie from "@/views/cookie";
    import Broken from "@/views/broken";
    import HeatMapSearchBox from "@/components/heatMapSearchBox";
    import epidemicReport from "@/views/CovInfoServe/epidemicReport";
    export default {
        name: "index",
        components: {HeatMapSearchBox, Broken, Cookie, Bar, Search, MapContainer,epidemicReport},
        data() {
            return {
                drawer: false,
                drawertwo:false,
                direction: 'ltr',
                directiont: 'rtl',
                activeName: '1',
                dead:'',
                confirme:'',
                highDanger:'',
                midDanger:'',
                current:''
            }
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            handleCloset(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            GoUrl(){
                this.$router.push({path:'/LookMapGo'})
            },
            GoCov(){
                this.$router.push({path:'/CovInfoServe'})
            },
            Delivery(){
                this.$router.push({path:'/storeView'})
            },
            shuaxing(){
                axios.get('http://api.tianapi.com/ncov/index?key=f2d47dfdee9eb196b39e3db3dd45b3d9').then(
                    response => {
                        console.log('请求成功了',response.data)
                        //console.log(response.data.newslist[0].desc.confirmedCount)
                        //console.log(response.data.newslist[0].desc.deadCount)
                        this.dead=response.data.newslist[0].desc.deadCount
                        this.confirme=response.data.newslist[0].desc.confirmedCount
                        this.highDanger=response.data.newslist[0].desc.highDangerCount
                        this.midDanger=response.data.newslist[0].desc.midDangerCount
                        this.current=response.data.newslist[0].desc.yesterdayConfirmedCountIncr
                    },
                    error => {
                        console.log('请求出错了',error.message)
                    }
                )
            }
        },
    }
</script>

<style scoped>
    #index_continer{
        height: 100%;
    }
    #map{
        //height: 700px;
        height: 100%;
    }
    .operation{
        //border: 1px solid red;
        width: 600px;
        display: flex;
        position: absolute;
        top: 0;
        left:450px;
    }
    #search{
        height: 30px;
        //border: 1px solid red;
        flex: 1;

    }
    .hestMap{
        //border: 1px solid red;
        height: 30px;
        flex: 1;
    }
    .center{
        height: 100%;
        position: relative;
    }
    .left{
        width: 350px;
        height: 100%;
        position: absolute;
        top: 0;
    }
    .right{
        width: 350px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
    }
    .CovInfo{
        height:50%;
        width: 200px;
    }
    .CovInfo button{
        float: right;
        background: #409EFF;
        border: 1px solid #409EFF;
        color: white;
        border-radius: 3px;
        width: 50px;
        height: 25px;
    }
    h3{
        margin-top: 0;
        border-left:5px solid orangered;
        color: #FFFFFF;
        opacity:0.8
    }
    .CovInfo p{
        font-family: Arial;
        font-weight: bold;
        margin: 10px 0 10px 20px;
    }
    .CovInfo span{
        color: #FFFFFF;
    }
    .btn{
        float: right;
        //border: 1px solid red;
        height: 200px;
        width: 100px;
        margin-top: -200px;
    }

    .el-button{
        width: 100px;
        height: 50px;
        margin-top: 30px;
        text-align: center;
    }
    .iconfont{
        color: #E6A23C;
        font-size: 20px;
    }
    .one{
        color: #a90000;
    }
    .two{
        color: #BE2121;
    }
    .three{
        color: #BE2121;
    }
    .four{
        color: #F23A3b;
    }
    .five{
        color: #F05926;
    }
    .travel{
        border: 1px solid #409EFF;
        width: 200px;
        margin:0 auto;
        text-align: center;
        background: #409EFF;
        padding: 10px;
        color: white;
        font-size: 20px;
        border-radius: 3px;
    }
    .travel{
        cursor: pointer;
    }
    .Covdesc{
        border: 1px solid #409EFF;
        width: 200px;
        padding: 10px;
        margin: auto;
        text-align: center;
        background: #409EFF;
        color: white;
        font-size: 20px;
        border-radius: 3px;
    }
    .Covdesc:hover{
        cursor: pointer;
    }
    .elm{
        border: 1px solid #409EFF;
        width: 200px;
        padding: 10px;
        margin:10px auto;
        text-align: center;
        background: #409EFF;
        color: white;
        font-size: 20px;
        border-radius: 3px;
    }
    .elm{
        cursor: pointer;
    }
    .remind{
        border: 1px solid #DCDFE6;
        width: 350px;
        margin:auto;
    }


</style>